<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.KillerFitness
 *
 * @copyright   Copyright (C) 2014 Nelson Soler, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * Last Modified: May 1, 2014   1:06am
 * Last Modified: May 3, 2014   2:45pm
 */

class StringBuilder {
	private $str = array();

	public function __construct() { }

	public function append($str) {
    	$this->str[] = $str;
	}

	public function toString() {
    	return implode($this->str);
	}
}

function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}

function curBaseUrl()
{
	$pageURL = 'http';
	if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
		$pageURL .= "://";
	if ($_SERVER["SERVER_PORT"] != "80") {
 		$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"]; // .$_SERVER["REQUEST_URI"];
	} else {
		$pageURL .= $_SERVER["SERVER_NAME"]; // .$_SERVER["REQUEST_URI"];
	}
	return $pageURL;
}

function curPageName() {
 return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}

defined('_JEXEC') or die;

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->getCfg('sitename');


if($task == "edit" || $layout == "form" )
{
	$fullWidth = 1;
}
else
{
	$fullWidth = 0;
}

// Add JavaScript Frameworks
// JHtml::_('bootstrap.framework');
// $doc->addScript('templates/' .$this->template. '/js/template.js');

// Add Stylesheets
// $doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

// Load optional RTL Bootstrap CSS
// JHtml::_('bootstrap.loadCss', false, $this->direction);

$active = JFactory::getApplication()->getMenu()->getActive();

// Get a db connection.
$db = JFactory::getDbo(); 
 
// Create a new query object.
$query = $db->getQuery(true);
 
$query->select($db->quoteName(array('id', 'link', 'title', 'home','level','parent_id')));
$query->from($db->quoteName('#__menu'));
$query->where($db->quoteName('menutype') . ' = ' . $db->quote('mainmenu'));
$query->where($db->quoteName('level') . ' = 1');
$query->where($db->quoteName('published') . ' = 1');
// Reset the query using our newly populated query object.
$db->setQuery($query);

// Load the results as a list of stdClass objects (see later for more options on retrieving data).
$results = $db->loadAssocList('id');
$rows = print_r($results, 1);

function getInnerMenu($pid) {
    if($pid == "1") { return null; } 
	// echo "<!-- Before getInnerMenu: " . $pid . " --> \n";
		$db2 = JFactory::getDbo(); 
		// Create a new query object.
		$innerQuery = $db2->getQuery(true);
	
		$innerQuery->select($db2->quoteName(array('id', 'link', 'title', 'home','level')));
		$innerQuery->from($db2->quoteName('#__menu'));
		$innerQuery->where($db2->quoteName('menutype') . ' = ' . $db2->quote('mainmenu'));
		$innerQuery->where($db2->quoteName('level') . ' = 2');
		$innerQuery->where($db2->quoteName('published') . ' = 1');
		$innerQuery->where($db2->quoteName('parent_id') . ' = ' . $pid);
		$db2->setQuery($innerQuery);
		$iResults = $db2->loadAssocList('id');
	// echo "<!-- After Fetch getInnerMenu: " . print_r($iResults) . " --> \n";
	return $iResults;
}

$pos = strpos(curPageUrl(), "/index.php?");
$base = substr(curPageUrl(),0,$pos);
$page_title = strtolower($active->title);
$dropdownmenu = " data-toggle='dropdown' ";

$n1 = new StringBuilder();
$n2 = new StringBuilder();

$doc =& JFactory::getDocument();
echo '<!-- Current title is: ' . $doc->getTitle() . " --> \n";

foreach ($results as $row) {
	if (curPageUrl() == $base . "/" . $row["link"]) {
	    try {
			$inResults = getInnerMenu($row["id"]);
			if($inResults != null) {
			$n2->append("<ul class='dropdown-menu'> \n");
			foreach($inResults as $iRow)
			{
				$n2->append("   <li><a href='" . $iRow["link"] . "' rel='" .$row["id"] . "'>" . $iRow["title"] . "</a></li> \n");
				$dropdownmenu = " data-toggle='dropdown' ";
			}
				$n2->append("</ul> \n");
			} else {
				$dropdownmenu = "";
				$n2 = "";
			}
		} catch (Exception $e) {
			echo "<!-- Exp: " . $e->getMessage() . " --> \n";
			$dropdownmenu = "";
			$n2 = "";
		}
		$n1->append("<li class='dropdown active'><a href='" . $row["link"] . "' class='dropdown-toggle' " . $dropdownmenu . "' rel='" .$row["id"] . "'>" . $row["title"] . "</a> \n");
	} elseif(strtolower($row["title"]) == 'home') {
		$act = "";
		if(strtolower($doc->getTitle()) == "home") {
			$act = " active";
		} 
		$n1->append("<li class='dropdown " . $act .  "'> <a href='index.php' class='dropdown-toggle'>Home</a> \n");
	} else {
		try {
			$inResults = getInnerMenu($row["id"]);
			if($inResults != null) {
				$n2->append("<ul class='dropdown-menu'> \n");
				foreach($inResults as $iRow)
				{
					$n2->append("   <li><a href='" . $iRow["link"] . "' rel='" .$row["id"] . "'>" . $iRow["title"] . "</a></li> \n");
					$dropdownmenu = " data-toggle='dropdown' ";
				}
				$n2->append("</ul> \n");
			} else {
				$dropdownmenu = "";
				$n2 = "";
			}
		} catch (Exception $e) {
			echo "<!-- Exp: " . $e->getMessage() . " --> \n";
			$dropdownmenu = "";
			$n2 = "";
		}
		$n1->append("<li class='dropdown'> <a href='" . $row["link"] . "' class='dropdown-toggle' " . $dropdownmenu . ">" . $row["title"] . "</a> \n");
	}
	if($n2 != null) {
		$n1->append($n2->toString());
	}
	// echo "<!-- Parent ID: " . $row["id"] . " --> \n";
	
	
	$n1->append("</li>");
	// echo "<!-- Results: (" . $row["title"] . ") | Link: " . $base . "/" . $row["link"] . " | currentUrl Var: " .curPageUrl() . " --> \n";
	// echo "<!-- QueryString: " . $qs . " --> \n";
}

// echo "<!-- \n " .$n1->toString() . "\n -->";

// Add current user information
$user = JFactory::getUser();

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span9";
}
else
{
	$span = "span12";
}

// Logo file or site title param
$logo = "<img src='" . $this->baseurl . "/templates/" . $this->template . "/assets/img/logo.png' style='z-index: 100;margin-top: -27px;padding-right: 5px;width: 80px;' alt='". $sitename . "' />";

?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <jdoc:include type="head" />
        
        <?php
        
            // echo "Template Path: " .$this.temlate;
            
        	// <link rel="shortcut icon" href= .$this.temlate. "assets/ico/favicon.png">
        
        	/* Bootstrap Core CSS */
			// Add Stylesheets
			$doc->addStyleSheet('templates/'.$this->template.'/assets/bootstrap/css/bootstrap.css');
			// <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
        
        	/* Plugins CSS */
        	$doc->addStyleSheet('templates/'.$this->template.'/assets/UItoTop/css/ui.totop.css');
        	// <link href="assets/UItoTop/css/ui.totop.css" rel="stylesheet">
        
        	$doc->addStyleSheet('templates/'.$this->template.'/assets/prettyPhoto/css/prettyPhoto.css');
        	// <link href="assets/prettyPhoto/css/prettyPhoto.css" rel="stylesheet">
        
        	/* REVOLUTION BANNER CSS SETTINGS */
        	$doc->addStyleSheet('templates/'.$this->template.'/assets/rs-plugin/css/settings.css');
        	// <link rel="stylesheet" type="text/css" href="assets/rs-plugin/css/settings.css" media="screen" />
        
	        /* Font Awesome  */
	        $doc->addStyleSheet('templates/'.$this->template.'/assets/font-awesome-4.0.1/css/font-awesome.min.css');
        	// <link href="assets/font-awesome-4.0.1/css/font-awesome.min.css" rel="stylesheet">
        
        	// Custom Stylesheet For This Template 
        	$doc->addStyleSheet('templates/'.$this->template.'/assets/css/stylesheet.css');
        	// <link href="assets/css/stylesheet.css" rel="stylesheet">
        
	        $doc->addStyleSheet('templates/'.$this->template.'/assets/css/skins.css');
        	// <link href="assets/css/skins.css" rel="stylesheet">
         ?>
        <!-- Google Fonts -->    
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
	        <script src="templates/protostar/assets/js/html5shiv.js"></script>
        	<script src="templates/protostar/assets/js/respond.min.js"></script>
        <![endif]-->
       
    </head>
    <body>
        <div id="utter-wrapper" class="color-skin-3">
            <header id="header" class="header" data-spy="affix" data-offset-top="10">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header" style="height: 38px;">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="<?php echo $this->baseurl; ?>">
                            	<?php echo $logo;?> Killer | <span>Fitness</span>
                           	</a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                             <ul class="nav navbar-nav">
                            	<?php echo $n1->toString() ?>
                             </ul>
                            <!-- /.nav -->
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container -->
                </nav>
                <!-- /.navbar -->
            </header>
            <!-- /#header -->
            <div id="index-1" class="main-wrapper">
            	<?php if(strtolower($doc->getTitle()) == 'home') { ?>  
					<main id="content" role="main" class="span12">
						<!-- Begin Content -->
						<jdoc:include type="modules" name="position-3" style="xhtml" />
						<jdoc:include type="message" />
						<jdoc:include type="component" />
						<jdoc:include type="modules" name="position-2" style="none" />
						<!-- End Content -->
					</main>
            	<?php } else {  ?>
	            	<section id="our-story" class="pad-top-25">
	            		<div class="container">
	            	    	<div class="row">
	            	        	<div class="col-lg-12 pad-25">
	            	        		<!-- Begin Content -->
	            	        		<jdoc:include type="modules" name="position-3" style="xhtml" />
	            	        		<jdoc:include type="message" />
	            	        	
	            	        		<jdoc:include type="component" />
	            	        		<jdoc:include type="modules" name="position-2" style="none" />
	            	        		<!-- End Content -->
	            				</div>
	            			</div>
	            		</div>
	            	</section>		
	            <?php } ?> 
                <!-- /#fullwidthbanner-container -->
                <section id="our-services" class="pad-top-50">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <?php if ($this->countModules('position-4')) : ?>
                                <div id="aside" class="span2">
                                	<!-- Begin Right Sidebar -->
                                	<jdoc:include type="modules" name="position-4" style="well" />
                                	<!-- End Right Sidebar -->
                                </div>
                                <?php endif; ?>
                            </div>
                            <!-- /.col-sm-6 -->
                            <div class="col-xs-12 col-sm-4">
                                <?php if ($this->countModules('position-5')) : ?>
                                <div id="aside">
                                	<!-- Begin Right Sidebar -->
                                	<jdoc:include type="modules" name="position-5" style="well" />
                                	<!-- End Right Sidebar -->
                                </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.container -->
                </section>
                <!-- /#our-services -->
                <section id="action-box" class="pad-25">
                    <div class="container">
                        <div class="action-box">
                            <?php if ($this->countModules('position-6')) : ?>
	                            <jdoc:include type="modules" name="position-6" style="well" />
                            <?php endif; ?>
                        </div>
                        <!-- /.action-box -->
                    </div>
                    <!-- /.container -->
                </section>
                <!-- /#action-box -->
                <?php if ($this->countModules('position-13')) : ?>
                    <jdoc:include type="modules" name="position-13" style="none" />
                <?php endif; ?>
            </div>
            <!-- /.main-wrapper -->
            <footer id="footer-1" class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="widget about-us">
                                <div class="footer-brand"><span>Killer | </span>Fitness</div>
                                <p>Lorem ipsum dolor sit amet, no consequat ullamcorper nec, te commune constituto intellegebat eam. Soleat populo id nec. Est in altera vocibus, et vim iudico adolescens, mel no discere mediocritatem.</p>
                            </div>
                            <!-- /.about-us -->
                            <div class="widget stay-connedted">
                                <div class="subpage-title">
                                    <h5>Stay Connected</h5>
                                </div>
                                <ul class="social-links">
                                    <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a class="google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li><a class="rss" href="#"><i class="fa fa-rss"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- /.col-md-3 -->
                        <div class="col-md-3">
                            <div class="widget popular-posts">
                                <div class="subpage-title">
                                    <h5>Links</h5>
                                </div>
                                <ul class="recent-posts">
                                    <li>
                                        <img src="templates/protostar/assets/img/blog/recent-posts/photo (1).jpg" alt="Post Image">
                                        <h5>
                                            <a href="post-1.html">The Ultimate Guide to Adjustment Layers – Vibrance</a>
                                            <small>Posted July 20, 2013</small>
                                        </h5>
                                    </li>
                                    <li>
                                        <img src="templates/protostar/assets/img/blog/recent-posts/photo (2).jpg" alt="Post Image">
                                        <h5>
                                            <a href="post-1.html">Complete Guide to What’s New in Adobe Photoshop 14.1</a>
                                            <small>Posted July 15, 2013</small>
                                        </h5>
                                    </li>
                                    <li>
                                        <img src="templates/protostar/assets/img/blog/recent-posts/photo (3).jpg" alt="Post Image">
                                        <h5>
                                            <a href="post-1.html">How to Integrate Lightroom Into Your Photoshop Workflow</a>
                                            <small>Posted July 10, 2013</small>
                                        </h5>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.popular-posts -->
                        </div>
                        <!-- /.col-md-3 -->
                        <div class="col-md-6">
                            <div class="widget tagcloud">
                                <div class="subpage-title">
                                    <h5>Calendar</h5>
                                </div>
                                <div class="col-md-8">
                                    <?php if ($this->countModules('position-12')) : ?>
                                    	<jdoc:include type="modules" name="position-12" style="well" />
                                    <?php endif; ?>
                                </div>
                            </div>
                            <!-- /.tagcloud -->
                        </div>
                        
                        <!-- /.col-md-3 -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </footer>
            <!-- /#footer-1 -->
            <footer id="footer-2" class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 footer-info-wrapper">
                            <span>Killer Fitness © 2014. All Rights Reserved.</span>                        
                        </div>
                        <!-- /.footer-info-wrapper -->
                        <div class="col-xs-12 col-sm-6 footer-links-wrapper">
                            <ul class="list-inline">
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">Terms Of Service</a></li>
                                <li><a href="#">Disclaimer</a></li>
                            </ul>
                        </div>
                        <!-- /.footer-links-wrapper -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </footer>
            <!-- /#footer-2 -->
            
            <?php 
            
            /*
            <div id="skin-chooser-wrap" class="skin-chooser-wrap hidden-xs">
                <span class="change-style">Change Styles</span>
                <span class="skin-chooser-toggle"><i class="fa fa-cog"></i></span>
                <ul class="list-inline">
                    <li>
                        <div id="color-skin-1" class="color-skin active"></div>
                    </li>
                    <li>
                        <div id="color-skin-2" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-3" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-4" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-5" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-6" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-7" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-8" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-9" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-10" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-11" class="color-skin"></div>
                    </li>
                    <li>
                        <div id="color-skin-12" class="color-skin"></div>
                    </li>
                </ul>
            </div>
            <!-- /#skin-chooser-wrap -->
            */
            ?>
        </div>
        <!-- /#utter-wrapper -->
        <!-- Bootstrap JS & Others JavaScript Plugins
            ================================================== -->
        <!-- Placed At The End Of The Document So Page Loads Faster -->
        <?php
        	$doc->addScript('templates/' .$this->template. '/assets/js/jquery-2.0.3.min.js');
        	$doc->addScript('templates/' .$this->template. '/assets/js/jquery-migrate-1.2.1.min.js');
			$doc->addScript('templates/' .$this->template. '/assets/bootstrap/js/bootstrap.min.js');
        	$doc->addScript('templates/' .$this->template. '/assets/rs-plugin/js/jquery.themepunch.revolution.min.js');
        	$doc->addScript('templates/' .$this->template. '/assets/carouFredSel-6.2.1/jquery.carouFredSel-6.2.1.js');
        	$doc->addScript('templates/' .$this->template. '/assets/prettyPhoto/js/jquery.prettyPhoto.js');
        	$doc->addScript('templates/' .$this->template. '/assets/jflickrfeed/jflickrfeed.min.js');
        	$doc->addScript('templates/' .$this->template. '/assets/UItoTop/js/easing.js');
        	$doc->addScript('templates/' .$this->template. '/assets/UItoTop/js/jquery.ui.totop.min.js');
        	$doc->addScript('templates/' .$this->template. '/assets/isotope-site/jquery.isotope.min.js');
        	$doc->addScript('templates/' .$this->template. '/assets/FitVids.js/jquery.fitvids.js');
        ?>
        
        <script type="text/javascript">
            var tpj = jQuery;
            tpj.noConflict();
            
            /*
            tpj(document).ready(function(){
	            $('.parent').addClass('dropdown');
    			$('.parent > a').addClass('dropdown-toggle');
                $('.parent > a').attr('data-toggle', 'dropdown');
                $('.parent > a').attr('href','#');
                $('.parent > a').append('<span class="caret"></span>');
                $('.parent > ul').addClass('dropdown-menu');
            });
            */
            
            tpj(document).ready(function () {
                // Revolution Slider
                if (tpj.fn.cssOriginal != undefined)
                    tpj.fn.css = tpj.fn.cssOriginal;
                tpj('.fullwidthbanner').revolution({
                    delay: 9000,
                    startwidth: 1200,
                    startheight: 400,
            
                    onHoverStop: "on",
            
                    thumbWidth: 100,
                    thumbHeight: 50,
                    thumbAmount: 3,
            
                    hideThumbs: 0,
            
                    navigationType: "none",
                    navigationArrows: "solo",
                    navigationStyle: "round",
                    navigationHAlign: "left",
                    navigationVAlign: "bottom",
                    navigationHOffset: 30,
                    navigationVOffset: 30,
            
                    soloArrowLeftHalign: "left",
                    soloArrowLeftValign: "center",
                    soloArrowLeftHOffset: 0,
                    soloArrowLeftVOffset: 0,
            
                    soloArrowRightHalign: "right",
                    soloArrowRightValign: "center",
                    soloArrowRightHOffset: 0,
                    soloArrowRightVOffset: 0,
            
                    stopAtSlide: -1,
                    stopAfterLoops: -1,
                    hideCaptionAtLimit: 0,
                    hideAllCaptionAtLilmit: 0,
                    hideSliderAtLimit: 0,
            
                    fullWidth: "on",
                    fullScreen: "off",
                    fullScreenOffsetContainer: "#topheader-to-offset",
            
                    shadow: 0
                });
                // PrettyPhoto
                tpj("a[rel^='prettyPhoto']").prettyPhoto({
                    theme: 'light_square',
                    social_tools: false
                });
                // FitVids
                tpj(".responsive-video-wrapper").fitVids();
                // jflickrfeed
                tpj('.flickr-photos-list').jflickrfeed({
                    limit: 9,
                    qstrings: {
                        id: '71865026@N00'
                    },
                    itemTemplate: '<li><a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
                });
                // jQuery UItoTop
                tpj().UItoTop({ easingType: 'easeOutQuart' });
                // Skin Chooser
                tpj(".skin-chooser-toggle").click(function () {
                    tpj(".skin-chooser-wrap").toggleClass("show");
                });
                tpj(".color-skin").click(function () {
                    var cls = this.id;
                    tpj(".color-skin").removeClass("active");
                    tpj(this).addClass("active");
                    tpj("#utter-wrapper").removeClass();
                    tpj("#utter-wrapper").addClass(cls);
                });
            });
            // jQuery CarouFredSel
            var caroufredsel = function () {
                tpj('#caroufredsel-portfolio-container').carouFredSel({
                    responsive: true,
                    scroll: 1,
                    circular: false,
                    infinite: false,
                    items: {
                        visible: {
                            min: 1,
                            max: 3
                        }
                    },
                    prev: '#portfolio-prev',
                    next: '#portfolio-next',
                    auto: {
                        play: false
                    }
                });
                tpj('#caroufredsel-blog-posts-container').carouFredSel({
                    responsive: true,
                    scroll: 1,
                    circular: false,
                    infinite: false,
                    items: {
                        visible: {
                            min: 1,
                            max: 3
                        }
                    },
                    prev: '#blog-posts-prev',
                    next: '#blog-posts-next',
                    auto: {
                        play: false
                    }
                });
                tpj('#caroufredsel-clients-container').carouFredSel({
                    responsive: true,
                    scroll: 1,
                    circular: false,
                    infinite: false,
                    items: {
                        visible: {
                            min: 1,
                            max: 4
                        }
                    },
                    prev: '#client-prev',
                    next: '#client-next',
                    auto: {
                        play: false
                    }
                });
            };
            tpj(window).load(function () {
                caroufredsel();
            });
            tpj(window).resize(function () {
                caroufredsel();
            });            
        </script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#submit_btn").click(function() { 
                //get input field values
                var user_name       = $('input[name=name]').val(); 
                var user_email      = $('input[name=email]').val();
                var user_phone      = $('input[name=phone]').val();
                var user_message    = $('textarea[name=message]').val();
                
                //simple validation at client's end
                //we simply change border color to red if empty field using .css()
                var proceed = true;
                if(user_name==""){ 
                    $('input[name=name]').css('border-color','red'); 
                    proceed = false;
                }
                if(user_email==""){ 
                    $('input[name=email]').css('border-color','red'); 
                    proceed = false;
                }
                if(user_phone=="") {    
                    $('input[name=phone]').css('border-color','red'); 
                    proceed = false;
                }
                if(user_message=="") {  
                    $('textarea[name=message]').css('border-color','red'); 
                    proceed = false;
                }
        
                //everything looks good! proceed...
                if(proceed) 
                {
                    //data to be sent to server
                    post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userMessage':user_message};
                    
                    //Ajax post data to server
                    $.post('contact_me.php', post_data, function(response){  
                        
                        //load json data from server and output message     
                        if(response.type == 'error')
                        {
                            output = '<div class="error">'+response.text+'</div>';
                        }else{
                        
                            output = '<div class="success">'+response.text+'</div>';
                            
                            //reset values in all input fields
                            $('#contact_form input').val(''); 
                            $('#contact_form textarea').val(''); 
                        }
                        
                        $("#result").hide().html(output).slideDown();
                    }, 'json');
                    
                }
            });
            
            //reset previously set border colors and hide all message on .keyup()
            $("#contact_form input, #contact_form textarea").keyup(function() { 
                $("#contact_form input, #contact_form textarea").css('border-color',''); 
                $("#result").slideUp();
            });
            
        });
        </script>
    </body>
</html>